<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<c:set var="login" scope="session" value="${sessionScope.login}"/>
<c:set var="sname" scope="session" value="${sessionScope.userName}"/>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fresh Direct - My Cart</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="${contextPath}"><img width="100" src="https://www.freshdirect.com/media/images/navigation/global_nav/fd_logo_on.gif"></img></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
          <li><h4>Welcome to FreshDirect!</h4></li>	
      </ul>
      <c:choose>
      <c:when test="${not empty sessionScope.userName}">
        <ul class="nav navbar-nav navbar-right">
          <li><div class="navbar-form">
              <a href="${contextPath}/user/mycart" type="button" class="btn btn-default">My Cart&nbsp;<span class="badge">${fn:length(cart.getProducts())}</span></a>
              </div></li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">${sessionScope.userName}<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="${pageContext.request.contextPath}/user/myaccount">My Account</a></li>
                <li><a href="${pageContext.request.contextPath}/user/myorders">My orders</a></li>
                <li><a href="${pageContext.request.contextPath}/user/faq">FAQ</a></li>
                <li class="divider"></li>
                <li><a href="${pageContext.request.contextPath}/userout">Logout</a></li>
              </ul>
            </li>
      </ul>
        </c:when>
      <c:otherwise >
      <ul class="nav navbar-nav navbar-right">
      <li>
      <div class="navbar-form ">
      <a href="${contextPath}/signup" type="submit" class="btn btn-primary">Sign Up</a>
      </div>
      </li>
      <li>
      <form class="navbar-form "  action="${contextPath}/user" method="POST">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="username" name="userName">
          <input type="password" class="form-control" placeholder="password" name="password">     
        </div>
        <button type="submit" class="btn btn-default">Sign In</button>
      </form>
      </li>
      </ul>
      </c:otherwise>
      </c:choose>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
<div class="row">
        <nav class="navbar navbar-default" role="navigation" style="background-color: #728d4b; border-radius: 10px;">
  <div class="container-fluid" style="background-color: #728d4b; border-radius: 10px; ">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" style="background-color: #728d4b" id="bs-example-navbar-collapse-2">
       <ul class="nav navbar-nav" style="background-color: #728d4b">
        <li style="background-color: #728d4b"><a style="background-color: #728d4b; color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/fruits">FRUITS</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif; " href="${contextPath}/product/category/vegetables">VEGETABLES</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/seafood">SEAFOOD</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/meat">MEAT</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/dairy">DAIRY</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/bakerynpastry">BAKERY & PASTRY</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/cerealnpalses">CEREAL & PALSES</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/frozen">FROZEN</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/cans">CANNED FOOD</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/flowers">FLOWERS</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/pet">PET</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
                <div class="container">
                    <div class="row-fluid" style="text-align: center;"><h2><div style="font-family: 'Oswald', sans-serif; font-weight: bold; color:#FFAE19;">MY CART</div></h2><br></div>
                    <div class="row-fluid">
                        <c:if test="${not empty message}">
                            <div class="alert alert-success" style="text-align: center;" role="alert">${message}</div>
                        </c:if>
                        <div class="col-md-1"></div>
                        <div class="col-md-10" style=" border: 0 none;">
                            <c:choose>
                            <c:when test="${empty cart.getProducts()}">
                                 <div class="alert alert-warning" role="alert">The shopping cart is empty</div>
                            </c:when>
                            <c:otherwise>
                            <div class="table-responsive">
                            <table class="table">
                                <tr>
                                    <th></th>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Pieces</th>
                                    <th>Total Price</th>
                                    <th></th>
                                </tr>
                                <c:forEach var="product" items="${cart.getProducts()}" varStatus="loop">  
                                    <tr <c:if test="${product.getProcurLevel() == 1}"> style="color: red" </c:if>>  
                                     <td><img src="${product.getImage()}" width="50"></td>
                                     <td>${product.getName()}</td>  
                                     <td>${product.getPrice()}</td>  
                                     <td>${product.getQuantity()}</td>
                                     <td><fmt:formatNumber type="number" value="${product.getQuantity()*product.getPrice()}" />
                                     </td>

                                 </tr> 
                                </c:forEach>  
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td><b>$<fmt:formatNumber type="number" value="${cart.getTotalPrice()}"/></b></td>
                                </tr>
                            </table>
                            </div>
                            <br/>
                            <form action="${pageContext.request.contextPath}/order/checkout" method="post">
                            <h3><div style="font-family: 'Oswald', sans-serif; font-weight: bold; color:#FFAE19;">Delivery Details</div></h3>
                            <input hidden >
                            <table class="table">   
                                     <tr>
                                         <td align="left" width="20%"><label>Email address:</label> </td>
                                     <td align="left" width="20%">${user.getEmail()}</td>
                                     <td></td>
                                     </tr>
                                     <tr>
                                         <td align="left" width="20%"><label>Full Name:</label></td>
                                     <td align="left" width="20%">${user.getFullName()}</td>
                                     <td></td>
                                     </tr>
                                     <td align="left" width="20%">Adress: </td>
                                     <td align="left" width="20%">${user.getaddress()}</td>
                                     </tr>
                                     <tr>
                                         <td align="left" width="20%"><label>Town:</label> </td>
                                     <td align="left" width="20%">${user.getTown()}</td>
                                     <td></td>
                                     </tr>
                                     <tr>
                                         <td align="left" width="20%"><label for="email">Postal Code:</label> </td>
                                     <td align="left" width="20%">${user.getPostalCode()}</td>
                                     <td></td>
                                     </tr>
                                     <tr>
                                     <td align="left" width="20%"><label for="email">Card Holder Name : </label></td>
                                     <td align="left" width="20%"><input name="holdername" class="form-control" value="${user.getholdername()}"/></td>
                                     </tr>
                                    <tr>   
                                    <td align="left" width="20%"><label for="email">Card Number : </label></td>
                                    <td align="left" width="20%"><input  class="form-control" name="cardnumber" value="${user.getcardnumber()}"/></td>
                                    </tr>
                                   <tr>    
                                   <td align="left" width="20%"><label for="email">Card Type :</label></td>
                                  <td align="left" width="20%">  
                                    <select class="form-control" name="cardtype">
                                  <option value="0">-</option>
                                   <option value="1">MasterCard</option>
                                   <option value="2">Visa</option>
                                   <option value="3">American Express</option>
                                   </select>
                                  </td>
                                   </tr>
                            </table>  
                            <div style="float: right;"><button type="submit" class="btn btn-default btn-lg" value="addproduct">Check Out</button></div>
                            </form>
                            </c:otherwise>
                            </c:choose>
                            <br/>
                            <br/>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
               

</div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>